<template>
	<!-- 内容 -->
	<div class="main">
	    <div class="other-main wp-1432">
			<div class="n-work-top">
				<div class="n-work-panel-tit">文章</div>
				<div class="n-work-filter-area">
					<span class="desc">案例研究、教程和资源</span>
					<div class="right">
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								<i class="i-label">排序方式：</i>{{filtersIndex3 == -1?'编辑精选':categorys.tags[filtersIndex3].title}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView">
								<el-dropdown-item v-for="(item,index) in categorys.tags" :key="index" @click.native="touchToRank(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								<i class="i-label">排序方式：</i>{{filtersIndex2 == -1?'最新作品':categorys.news[filtersIndex2].title}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView">
								<el-dropdown-item v-for="(item,index) in categorys.news" :key="index" @click.native="touchToOrderColumn(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
            <ul class="games-data" :class="[model]">
                <li v-for="(item, idx) in articleList" :key="idx" class="dx-vd-item" :class="{'no-data':!item.id}">
                    <a class="fav-d-item" :href="'/article/'+item.id" target="_blank" v-if="item.id">
                    <div class="img-flex-box">
                        <div class="main-img">
                        <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                        </div>
                    </div>
                    <div class="bot-desc">
                        <span class="file-name">{{ item.title }}</span>
                    </div>
                    <div class="bot-author">
                        <a class="u" @click.stop="toUsercenter(item.member.id)">
                        <span class="img-box">
                            <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                        </span>
                        <span class="name">{{ item.member.userName }}
							
							<el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
						</span>
                        </a>
                        <div class="rt">
                        <span class="like-num">{{ item.praiseStr }}</span>
                        <div class="vnum">
                                {{ item.seeStr }}
                            </div>
                        </div>
                    </div>
                    </a>
                </li>
            </ul>
	        <!-- <ul class="new-works nine-home-new-works nine-pd-pos ul-imgtxtq1">
	            <li v-for="(item,i) in articleList" :key="i">
	                <a class="con" target="_blank" :href="'/articleDetails/'+item.id">
	                    <div class="pic">
							<img :src="`https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@1x456.webp`" alt="" />
							<div class="basic-info">
								<span class="ss">{{(item.category&&item.topCategory&&item.category.parentId==item.topCategory.id?item.categoryName:(item.category.parentName?item.category.parentName+'-':'')+item.categoryName)}}</span>

								<div class="news-tags" v-if="item.tagsList&&item.tagsList.length>0">
									<img style="margin-left:5px;"  v-for="(t,tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="">
								</div>
							</div>
							<span class="con-mask">

							</span>
						</div>
	                    <div class="txt">
	                        <span class="mini-cat-name">文章</span>
							<h3>
								<span class="title">{{item.title}}</span>
							</h3>
							<div class="top">
								<span class="name" :title="item.member.userName">
									<a @click.stop="toPersonCenter(item.member.id)">
										<img :src="get_avatar_url(item.member, 1, 20)" :srcset="get_avatar_urls(item.member, 20)" :alt="item.member.userName" @error="onImgLoadError"/>
										{{item.member.userName}}
									</a>
								</span>
								<div class="rr">
									<span><i class="i1"></i>{{item.praiseStr}}</span>
									<span><i class="i2"></i>{{item.seeStr}}</span>
								</div>
							</div>
	                    </div>
	                </a>
	            </li>
	        </ul> -->
	        <!-- 页码 -->
	        <div class="pages new-page-layout pro-page-layout" v-if="articleList.length>0">
	        	<!-- <el-pagination
	        	  background
	        	   @size-change="changeSizeHandle" @current-change="currentChangeHandle"
	        	        :current-page="currentPage" :page-size="queryParams.pageSize"
	        	  layout="prev,pager,next"
	        	  :total="total">
	        	</el-pagination> -->
				<span class="page-prev" @click="handlePagePrev"></span>
				<span class="page-tip">第 {{queryParams.pageNum}} 页，共 {{totalPage}} 页</span>
				<span class="page-next" @click="handlePageNext"></span>
	        </div>
	    </div>
	</div>
	<!-- 内容 -->
</template>

<script>
	import SparkMD5 from 'spark-md5'
	import common from '../../static/utils/common.js';
	import API from '../../static/utils/API.js';
	import 'vue-slick-carousel/dist/vue-slick-carousel.css'
	import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
	import layer from "layui-layer";
	import '../assets/style/swiper.css'
	import api from '@/api/api'
	import Swiper from "swiper";
	// import "swiper/dist/css/swiper.min.css";
	export default{
		components:{
			layer
		},
		data() {
			return {
                model: 'small',
				defaultAvatar:require('../assets/images/imgl1.png'),
				breadTitle:'全部',
				queryParams: {
					pageNum: 1,
					pageSize: 12,
					categoryId:9,
					orderByColumn: "createTime",
					rank:'首页推荐',
					isAsc: "desc"
				},
				articleList: [],
				total: 0,             // 总条数，根据接口获取数据长度(注意：这里不能为空)
				currentPage: 1,
				tabIndex:0,
				categoryList:[],
				cateId:'',
				categorys:{},
				filtersIndex1:-1,
				filtersIndex2:-1,
				filtersIndex3:-1,
				totalPage:0
			}
		},
		async mounted() {
			// document.title='文章/案例研究/教程-GAMEUI.NET-游戏UI/UX学习、交流、分享平台'
			let _cateId = this.$route.query.cate_id;
			if(_cateId != undefined){
				this.cateId = _cateId;
			}
			//this.getCategorys()
			let that = this;
			let params = {
				parentId:9,
				orderByColumn:'sort',
				pageSize:100,
				pageNum:1,
				isAsc:'asc'
			}
			let result=await api.getChildrenListByParentId(params);
			//common.requestGet(API.getChildrenListByParentId, params, function(result) {
			if (result.code === 0) {
				that.categoryList = [{title:'全部',image:require('../assets/images/all_bg.png')}].concat(result.data);
				for (var i in that.categoryList) {
					if (that.categoryList[i].id == that.cateId) {
						that.tabIndex = i
					}
				}
				// that.getArticleList()
				//that.getMuneList()
				params = {
					'type': 'discover'
				}
				let res=await api.getCategoryFilter(params);
				//common.requestGet(API.getCategoryFilter, params, function(res) {
				if (res.code == 0) {
					that.categorys = res.data
				}
				//})
			}
			//})
			
			this.queryList()

			
			that.$nextTick(()=>{
				var mySwiper = new Swiper ('.swiper-container', {
					slidesPerView:3
					}) 
			})
	    },
		watch:{
			'$route':function(to,from){
				let _cateId = this.$route.query.cate_id;
				if(_cateId != undefined){
					this.cateId = _cateId;
					this.queryParams.categoryId=_cateId;
				}
				this.getCategorys();
				this.queryList();
			}
		},
		methods: {
            loadError(e){
                e.target.removeAttribute('srcset');
            },
			version(time) {
    		  let date = new Date(time)
    		  return date.getTime()
    		},
			onImgLoadError(e){
				e.target.src=this.defaultAvatar;
				e.target.srcset=this.defaultAvatar;
			},
			get_avatar_url(member={id:'', avatar:''}, n=1, w=30) {
    			if (!member.id || !member.avatar) return this.defaultAvatar
    			let hash = SparkMD5.hash(member.avatar).slice(0, 6)
    			return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    		},
    		get_avatar_urls(member={id:'', avatar:''}, w=30) {
    			return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    		},
			handlePagePrev(){
				$('body,html').animate({
					'scrollTop':0
				}, 500);
				if(this.queryParams.pageNum==1)return;
				this.queryParams.pageNum--;
				this.queryList();
			},
			handlePageNext(){
				$('body,html').animate({
					'scrollTop':0
				}, 500);
				if(this.queryParams.pageNum==this.totalPage)return;
				this.queryParams.pageNum++;
				this.queryList();
			},
			async queryList(){
				var that =  this;
				let result=await api.articlelist(that.queryParams);
			 	//common.requestPost(API.articleList,that.queryParams,function(result){
                let domainUrl=that.$imgdomainurl;
                result.data.map(item=>{
                    let _vtime=null;
                    if(item.updateTime){
                        _vtime=item.updateTime;
                    }else if(item.createTime){
                        _vtime=item.createTime;
                    }else if(item.create_time){
                        _vtime=item.create_time.replace('T',' ');
                    }
                    _vtime=Math.abs(new Date(_vtime).getTime());
                    let srcsets=[];
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                    item.srcsets=srcsets.join(',')
                    item.lazy={
                        src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                })
				that.articleList = result.data;
				that.total=result.total;
				let rsnum=this.total%this.queryParams.pageSize;

				
				let tnum=rsnum==0?this.total/this.queryParams.pageSize:parseInt(this.total/this.queryParams.pageSize+1);
				this.totalPage=tnum;
			 	//})
			},
			toPersonCenter(id){
				let routeData = this.$router.resolve({ path: "/personalCenter/"+id});
				window.open(routeData.href, '_blank');
			},
			touchToComeFrom(item,index) {
				// let that = this
				this.filtersIndex1 = index
				// let param = {}
				// param['categoryId'] = this.queryParams.categoryId
				// param['pageNum'] =this.queryParams.pageNum;
				// param['pageSize'] = this.queryParams.pageSize;
				// let _value=that.categorys.filters[index].value;
				// let _valueArray=_value.split('&');
				// _valueArray.forEach(f=>{
				// 	let _items=f.split('=');
				// 	param[_items[0]]=_items[1];
				// })
				this.queryParams.comeFrom=item.value;
				//console.log(that.categorys.filters[index].value)
				//let url = API.articleList + '?' + that.categorys.tags[index].value
				// let url = API.articleList;
				// common.requestPost(url,param,function(result){
				// 	that.articleList = result.data;
				// 	that.total=result.total;
				// })
				this.querylist();
			},
			touchToOrderColumn(item,index) {
				let that = this
				that.filtersIndex2 = index
				// let param = {}
				// param['categoryId'] = that.queryParams.categoryId
				// param['pageNum'] =this.queryParams.pageNum;
				// param['pageSize'] = this.queryParams.pageSize;
				// let _value=that.categorys.news[index].value;
				// let _valueArray=_value.split('&');
				// _valueArray.forEach(f=>{
				// 	let _items=f.split('=');
				// 	param[_items[0]]=_items[1];
				// })

				// console.log(that.categorys.news[index].value)
				//let url = API.articleList + '?' + that.categorys.tags[index].value
				// let url = API.articleList;
				this.queryParams.orderByColumn=item.value;
				// common.requestPost(API.articleList,this.queryParams,function(result){
				// 	that.articleList = result.data;
				// 	that.total=result.total;
				// })
				this.querylist();
			},
			touchToRank(item,index) {
				// console.log("显示返回的______11___",index)
				// let that = this
				this.filtersIndex3 = index
				// let param = {}
				// param['categoryId'] = this.queryParams.categoryId
				// param['pageNum'] =this.queryParams.pageNum;
				// param['pageSize'] = this.queryParams.pageSize;
				// let _value=that.categorys.tags[index].value;
				// let _valueArray=_value.split('&');
				// _valueArray.forEach(f=>{
				// 	let _items=f.split('=');
				// 	param[_items[0]]=_items[1];
				// })

				this.queryParams.rank=item.value;

				//console.log(that.categorys.tags[index].value)
				//let url = API.articleList + '?' + that.categorys.tags[index].value
				// let url = API.articleList;
				// common.requestPost(API.articleList,this.queryParams,function(result){
				// 	that.articleList = result.data;
				// 	that.total=result.total;
				// })
				this.querylist();
			},
			querylist(){
				let that=this;
				common.requestPost(API.articleList,this.queryParams,function(result){
                    let domainUrl=that.$imgdomainurl;
                    result.data.map(item=>{
                        let _vtime=null;
                        if(item.updateTime){
                            _vtime=item.updateTime;
                        }else if(item.createTime){
                            _vtime=item.createTime;
                        }else if(item.create_time){
                            _vtime=item.create_time.replace('T',' ');
                        }
                        _vtime=Math.abs(new Date(_vtime).getTime());
                        let srcsets=[];
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                        item.srcsets=srcsets.join(',')
                        item.lazy={
                            src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                        }
                    })
					that.articleList = result.data;
					that.total=result.total;
				})
			},
			toArticleDetails: function (id) {
				let routeData = this.$router.resolve({ path: "/articleDetails/"+id});
				window.open(routeData.href, '_blank');
				// console.log(id)
				// let getId = id
				// this.$router.push({
				// 	path: "/articleDetails/"+id
				// })
			},
			toAddArticle: function(){
				this.$router.push("/addArticle");
			},
			// 每页显示的条数改变
			 changeSizeHandle(val) {
				 this.queryParams.pageSize = val                   // 改变每页显示的条数 
				 this.queryParams.pageNum = 1              // 注意：在改变每页显示的条数时，要将页码显示到第一页
				 this.currentPage = 1
				 this.getArticleList(this.queryParams)                    // 点击每页显示的条数时，显示第一页
				//  console.log(`每页 ${val} 条`)
			 },
			 // current-change用于监听页数改变，而内容也发生改变
			 currentChangeHandle(val) {
				 $('body,html').animate({
					'scrollTop':0
				}, 0);
				 this.queryParams.pageNum = val                // 改变默认的页数
				 this.currentPage = val 
				 this.getArticleList(this.queryParams)                         // 切换页码时，要获取每页显示的条数
				// console.log(`当前页: ${val}`)
			 },
			getArticleList: function(param) {
			 	var that =  this
			 	common.requestPost(API.articleList,param,function(result){
                    let domainUrl=that.$imgdomainurl;
                    result.data.map(item=>{
                        let _vtime=null;
                        if(item.updateTime){
                            _vtime=item.updateTime;
                        }else if(item.createTime){
                            _vtime=item.createTime;
                        }else if(item.create_time){
                            _vtime=item.create_time.replace('T',' ');
                        }
                        _vtime=Math.abs(new Date(_vtime).getTime());
                        let srcsets=[];
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                        item.srcsets=srcsets.join(',')
                        item.lazy={
                            src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                        }
                    })
			 		that.articleList = result.data
			 	})
			},
			touchToTab(index){
				if(this.tabIndex==index)return;
				this.tabIndex = index,
				this.queryParams.pageNum = 1
				if(index==0){
					this.queryParams.categoryId=9;
					this.breadTitle='全部';
				}else{
					if(index==-1){
						this.tabIndex=subParentIdx;
						index=subParentIdx;
					}
					this.queryParams.categoryId = this.categoryList[this.tabIndex].id;
					this.breadTitle=this.categoryList[index].title;
				}
				this.queryList()
			},
			async getCategorys () {
			    let that = this;
				let params = {
					parentId: 9,
					orderByColumn:'sort',
					pageSize:100,
					pageNum:1,
					isAsc:'asc'
				}
				let result=await api.getChildrenListByParentId(params);
			    //common.requestGet(API.getChildrenListByParentId,params, function (result) {
			        if (result.code === 0) {
			            that.categoryList = [{title:'全部',image:require('../assets/images/all_bg.png')}].concat(result.data);
						for(var i in that.categoryList){
							if(that.categoryList[i].id == that.cateId){
								that.tabIndex = i
								//that.queryParams.categoryId = that.categoryList[i].id
							}
						}
						that.$nextTick(()=>{
							var mySwiper = new Swiper ('.swiper-container', {
								slidesPerView:3
								}) 
						})
						that.getMuneList()
			        }
			    //})
			},
			async getMuneList(){
				let that = this
				let params = {'type':'article'}
				let res=await api.getCategoryFilter(params);
				//common.requestGet(API.getCategoryFilter,params,function(res){
					if(res.code == 0){
						that.categorys = res.data
					}else {
						layer.msg(res.msg)
					}
				//})
			}
		}
	}
</script>

<style scoped>
.ul-imgtxtq1 .pic img{
	height:100% !important;
	width:100% !important;
}


.wrapper{
	position: relative;
    height: 1rem;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    background: #ddd;
}



































































</style>